<template>
  <div class="box">
    <div class="top"></div>
    <!-- 左 -->
    <div class="left">
      <div class="left1">
        <Title title="近三年来毕业人员去向------"></Title>
        <Left1></Left1>
      </div>
      <div class="left2">
        <Left2></Left2>
      </div>
    </div>
    <!-- 中 -->
    <div class="center">
      <div class="center1">
        <Center11></Center11>
      </div>
      <div class="center2">
        <Center22></Center22>
      </div>
    </div>
    <!-- 右 -->
    <div class="right">
      <div class="right1">
        <Title title="毕业生流向城市------"></Title>
        <Right1></Right1>
      </div>
      <div class="right2">
        <Title title="毕业生薪资分布------"></Title>
        <Right2></Right2>
      </div>
    </div>
  </div>
</template>

<script setup>
import Left1 from '@/components/Left1.vue'
import Title from '../components/gong/Title.vue'
import Left2 from '../components/Left2.vue'
import Right1 from '../components/Right1.vue'
import Right2 from '@/components/Right2.vue'
import Center11 from '../components/Center11.vue'
import Center22 from '../components/Center22.vue'
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: url('../assets/images/pageBg.png');
  display: flex;
  position: relative;
  left: 0;
  top: 0;
}
.top {
  width: 100vw;
  height: 70px;
  background: url('../assets//images/Top.png') no-repeat 0 0/100% 100%;
  position: absolute;
  top: 0;
}

.left {
  width: 32vw;
  height: 100vh;
  background: url('../assets//images/Left.png') no-repeat 0 0 /100% 100%;
}
.left1 {
  margin: 50px 60px 5px 60px;
  background: #0c1d5f;
  height: 50vh;
}
.left2 {
  margin: 50px 60px 5px 60px;
  background: #0c1d5f;
  height: 35vh;
}
.center {
  width: 36vw;
  height: 100vh;
  /* background-color: red; */
}
.right {
  width: 32vw;
  height: 100vh;
  background: url('../assets/images/Right.png') no-repeat 0 0 /100% 100%;
}
.right1 {
  margin: 60px 60px 5px 60px;
  background: #0c1d5f;
  height: 38vh;
}
.right2 {
  margin: 45px 60px 5px 60px;
  background: #0c1d5f;
  height: 40vh;
}
.center1 {
  width: 100%;
  height: 60vh;
  margin-top: 50px;
  /* border: solid 1px red; */
}

.center2 {
  width: 100%;
  height: 10vh;
  /* border: solid 1px red; */
  margin-top: 22vh;
}
</style>
